<!doctype html>
<html>
  <head>
    <title>我的吉他谱库</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="./bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./bootstrap-3.0.0/assets/js/jquery.js"></script>
    <script src="./vue.min.js"></script>
    <script>
    var songs = ['我真的受伤了', '淘汰', '圣诞结', '好心分手', '挥着翅膀的女孩'];
    </script>
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">我的吉他谱库</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#iOS">文字谱</a></li>
            <li><a href="#SVN">图片谱</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div id="songlist" class="col-sm-3 btn-group-vertical">
          <button class='song btn btn-default' v-for="song in songs" @click="loadSong(song)" class="btn btn-default">{{song}}</button>
        </div>
        <div class="col-sm-6">
          <span>变调:</span>
          <div class="btn-group">
            <button class="btn btn-default" onclick="fall()">-</button>
            <button class="btn btn-default" onclick="reset()">恢复</button>
            <button class="btn btn-default" onclick="rise()">+</button>
          </div>
          <pre id="song"></pre>
        </div>
        <div class="col-sm-3">
          <div class="panel panel-default">
            <div class="panel-heading">用到的和弦</div>
            <div class="panel-body" id="chordsUsed">
            </div>
          </div>
        </div>
      </div><!--row-->
    </div><!--container-->

    <script src="./bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>

    <script>
      var toneLoop = ['A','bB','B','C','C#','D','bE','E','F','F#','G','G#'];
      function getRisingToneName(toneName) {
        var index = toneLoop.indexOf(toneName);
        index = (index + 1) % toneLoop.length;
        return toneLoop[index];
      }
      function getFallingToneName(toneName) {
        var index = toneLoop.indexOf(toneName);
        index = (index - 1 + toneLoop.length) % toneLoop.length;
        return toneLoop[index];
      }
      function toneOf(chord) { 
        if (chord.indexOf('b') == 0) return {name:chord.substr(0,2),attr:chord.substr(2)}; 
        else if (chord.indexOf('#') > 0) return {name:chord[0]+'#',attr:chord.substr(1,chord.length-2)};
        else return {name:chord[0],attr:chord.substr(1)};
      }
      function changeOneChord(chord, getNextToneName) {
        var tone = toneOf(chord);
        var nextToneName = getNextToneName(tone.name);
        if (nextToneName.length == 2 && nextToneName[1] == '#') {
          return nextToneName[0] + tone.attr + '#';
        } else {
          return nextToneName + tone.attr;
        }
      }

      var chordsReg = /b?[A-G][a-z0-9]?#?/gm;
      function rise() {
        var song = $('#song').html();
        var newSong = song.replace(chordsReg, function(chord) {
          return changeOneChord(chord, getRisingToneName);
        });
        $('#song').html(newSong);
        updateChordsUsed();
      }
      function fall() {
        var song = $('#song').html();
        var newSong = song.replace(chordsReg, function(chord) {
          return changeOneChord(chord, getFallingToneName);
        });
        $('#song').html(newSong);
        updateChordsUsed();
      }
      var originSong = $('#song').html();
      function reset() {
        $('#song').html(originSong);
        updateChordsUsed();
      }

      function updateChordsUsed() {
        var song = $('#song').html();
        var m = song.match(chordsReg);
        // 去重
        m.sort();
        var chordsUsed = [m[0]];
        for(var i=1; i<m.length; i++) {
          if (m[i] != chordsUsed[chordsUsed.length-1]) {
            chordsUsed.push(m[i]);
          }
        }
        // 写到页面
        $('#chordsUsed').html(chordsUsed.join(', '));
      }

      var songlistCtrl = new Vue({
        el: '#songlist',
        data: { songs: songs },
        methods: { loadSong: loadSong }
      });

      function loadSong(song) {
        $.get('songs/'+song+'.txt', function(txt) {
          console.log(txt);
          $('#song').html(txt);
          originSong = txt;
          updateChordsUsed();
        });
      }
      $('.song:first').click();
    </script>
  </body>
</html>
